<template>
  <div class="user-option">
    <h3 class="u-name">巴黎巴黎干杯</h3>
    <a href="#" class="u-tag">年度大会员</a>
    <div class="u-level-group p-lr">
      <span class="u-level">等级 5</span>
      <span class="u-exp">22991 / 28800</span>
    </div>
    <el-progress
      :stroke-width="3"
      :percentage="levelPercent"
      color="#F3CB85"
      :show-text="false"
      class="p-lr"
    ></el-progress>
    <div class="u-purse p-lr">
      <span class="el-icon-picture-outline-round u-point">1129</span>
      <span class="el-icon-s-help u-bb">0</span>
      <a href="#" class="u-email"></a>
      <a href="#" class="u-phone"></a>
    </div>
    <div class="u-info">
      <div>
        <span class="u-info-tag">关注</span>
        <p class="u-info-num">6</p>
      </div>
      <div>
        <span class="u-info-tag">粉丝</span>
        <p class="u-info-num">2</p>
      </div>
      <div>
        <span class="u-info-tag">动态</span>
        <p class="u-info-num">5</p>
      </div>
    </div>
    <div class="ul-bar">
      <ul>
        <li>
          <a href="#" class="el-icon-user">个人中心</a>
        </li>
        <li>
          <a href="#" class="el-icon-document">投稿管理</a>
        </li>
        <li>
          <a href="#" class="el-icon-money">B站钱包</a>
        </li>
        <li>
          <a href="#" class="el-icon-notebook-2">订单中心</a>
        </li>
        <li>
          <a href="#" class="el-icon-bangzhu">直播中心</a>
        </li>
        <li>
          <a href="#" class="el-icon-collection">我的课程</a>
        </li>
        <li class="u-lang">
          <a href="#" class="el-icon-setting">语言：简体中文</a>
        </li>
        <li>
          <a href="#" class="el-icon-switch-button">退出</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  computed: {
    levelPercent() {
      return (22991 / 28800) * 100
    },
  },
}
</script>
<style lang="less" scoped>
.user-option {
  display: none;
  position: absolute;
  opacity: 1;
  top: 40px;
  left: -100px;
  width: 250px;
  background-color: #fff;
  z-index: 1;
  box-shadow: 1px 1px 1px #ccc;
  border-radius: 2px;
  text-align: center;
  text-shadow: none;
  cursor: default;
  padding: 40px 0px 0;
}
.u-name {
  font-size: 18px;
  color: #fb7299;
}
.u-tag {
  margin-top: 1px;
  padding: 0 3px;
  font-size: 12px !important;
  background-color: #fb7299;
  text-shadow: none !important;
}
.u-level-group {
  height: 40px;
  line-height: 40px;
}
.u-level {
  float: left;
}
.u-exp {
  float: right;
  font-size: 12px;
  color: #a2a2a2;
}
.u-purse {
  height: 50px;
  line-height: 50px;
  text-align: left;
}
.u-point {
  width: 35%;
}
.u-bb {
  width: 25%;
}
.u-point::before,
.u-bb::before {
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
  margin-right: 5px;
  line-height: 20px;
}
.u-email,
.u-phone {
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #00a1d6;
}
.u-email {
  margin-right: 8px;
}
.u-info {
  display: flex;
  height: 60px;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  align-items: center;
}
.u-info div {
  flex: 1;
}
.u-info div:hover p,
.u-info div:hover span {
  color: #00a1d6;
}
.u-info-tag {
  color: #999;
  font-size: 13px;
}
.u-info-num {
  font-size: 16px;
  font-weight: 700;
  margin-top: -5px;
}
.ul-bar li {
  width: 100%;
  text-align: left;
  height: 50px;
  line-height: 40px;
  margin-left: 0;
}
.ul-bar a {
  color: #000;
  text-shadow: none;
  font-size: 15px;
}
.ul-bar .u-lang {
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}
.ul-bar a::before {
  color: #9d9d9d;
  font-size: 23px;
  vertical-align: middle;
  line-height: 20px;
  margin-right: 8px;
  margin-left: 15px;
}
.ul-bar li:hover {
  background-color: #f4f4f4;
}
</style>
